<template>
  <div>
    <!-- 搜索结果页-头部导航 -->
    <div class="search-result-container">
      <!-- 点击实现后退效果 -->
      <van-nav-bar
        title="搜索结果"
        left-arrow
        @click-left="$router.go(-1)"
        fixed
      />
    </div>
    <!-- 搜索结果页-循环文章单元格 -->
    <div>
      <!-- van-list组件 加载更多 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- 搜索的文章 复用组件-->
        <!-- 接收数据, 循环文章单元格, 传入文章对象 - 查看效果 把文章对象传入组件:artobj="obj"-->
        <article-item
          v-for="(obj,index) in searchResultList"
          :key="index"
          :obj="obj"
          @click.native="articleClickFn(obj.art_id)"
          :isShowX="false"
        ></article-item>
        <!-- 父 传 子 变量 :isShowX="false" 隐藏反馈按钮x  -->
      </van-list>
    </div>
  </div>
</template>

<script>
// 引入文章单元格组件
import ArticleItem from '@/components/ArticleItem.vue'
import { searchResultListAPI } from '@/api'
export default {
  name: 'SearchResult',
  data () {
    return {
      searchResultList: [], // 搜索结果列表数组
      loading: false, // 加载状态--触底触发加载状态
      finished: false, // 全部加载完成状态
      page: 1
    }
  },
  components: { ArticleItem },
  // 页面刷新时，发请求-获取searchResultListAPI，得到数据
  created () {
    this.searResListFn()
  },
  methods: {
    // 封装方法--获取-请求文章列表
    async searResListFn () {
      // localhost:8080/#/search/好不好----路由信息 #后面 参数就是路由规则定义的 path: '/search/:keywords'
      const res = await searchResultListAPI({
        keywords: this.$route.params.keywords, // 跳转路由的时候地址栏携带的搜索关键词 /后面-好不好
        page: this.page
      })
      // 加载-数据更新完毕后-finished 结束 不用再加载了 显示“没有更多了”不再触发load事件
      if (res.data.data.results === null || res.data.data.results.length === 0) {
        this.finished = true
      }
      this.searchResultList = [...this.searchResultList, ...res.data.data.results] // 加上上一页
      this.loading = false
    },
    // 加载更多事件-触底触发
    onLoad () {
      this.page++ // 触底请求下一页数据，拼接到当前文章列表数组后面
      this.searResListFn() // onLoad触发网络请求
    },
    // 文章点击事件--跳转详情页 -===$router.push(`/article_detail?aid=${item.art_id}`)
    articleClickFn (artId) {
      this.$router.push({
        path: '/article_detail',
        query: {
          aid: artId // ？后面的内容  artId: this.obj.art_id
        }
      })
    }
  }

}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
